import React, { useState } from 'react'
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { useAtomValue } from 'jotai';
import { ThemeProvider } from '@shopify/restyle';

import { linking } from './linking';
import AppTheme, { NavigationTheme } from './theme';
import { Fallback } from './components/Fallback';
import AppStack from './stacks';
import { signedInAtom } from './utils/storageUtil';
import { AnimatedBootSplash } from './AnimatedBootSplash';


const App = () => {
  const signedIn = useAtomValue(signedInAtom);
  const [visible, setVisible] = useState(true);


  return (
    <>
        <SafeAreaProvider>
          <GestureHandlerRootView style={{ flex: 1 }}>
            <ThemeProvider theme={AppTheme}>
              <NavigationContainer
                // onReady={() => {
                //   BootSplash.hide({ fade: true })
                // }}
                linking={linking}
                fallback={<Fallback />}
                theme={NavigationTheme}>
                <AppStack {...{ confirmed: true, signedIn }} />
              </NavigationContainer>
            </ThemeProvider>
          </GestureHandlerRootView>
        </SafeAreaProvider>

      {visible && (
        <AnimatedBootSplash
          onAnimationEnd={() => {
            setVisible(false);
          }}
        />
      )}

    </>
  )
}

export default App